<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素固定</title>
	</head>
	<style>
			.fixed-element {
			  position: fixed; /* 将元素固定在屏幕上方 */
			  top: 0; /* 顶部与屏幕上边距为0 */
			  left: 0; /* 左侧与屏幕左边距为0 */
			  background-color: #f1f1f1; /* 背景颜色为灰色 */
			  padding: 10px; /* 内边距为10像素 */
			  width: 100%; /* 宽度为100% */
			}
			.body{
				background-color: aqua;
			}
			
			 .fixed-element-center {
			   position: fixed; /* 将元素固定在屏幕右侧 */
			    top: 50%; /* 垂直居中 */
			    right: 0; /* 靠右对齐 */
			    transform: translateY(-50%); /* 平移垂直方向一半的高度，实现垂直居中 */
			    background-color: #f1f1f1; /* 背景颜色为灰色 */
			    padding: 10px; /* 内边距为10像素 */
			    width: 200px; /* 宽度为200像素 */
			    text-align: center; /* 文本居中对齐 */
			 }
			 
			 .fuben{
				 display: flex;
				 justify-content: center;
				 align-items: center;
				 margin: 5px;
			 }
			 
			 .fixed {
			   position: fixed; /* 固定定位，不随页面滚动 */
			 }
	</style>
	<body>
		<div class="fixed-element dingbu">这是一个固定在屏幕上方的元素</div>
		<div class="fixed-element-center">固定在屏幕右侧中间</div>
		  
		<div style="height: 2000px;display: flex;" >
			<div style="width: 80%;margin: 5px;">
				<div style="width: 100%;height: 300px;background-color: chocolate;" class="fuben">
					占位作用
				</div>
			</div>
			<div style="width: 20%;margin: 5px;">
				<div style="width: 100%;height: 200px;background-color: bisque;" class="fuben">
					占位作用
				</div>
				<div style="width: 100%;height: 100px;background-color: darkcyan;" class="fuben youce">
					固定不动
				</div>
			</div>
		</div>
		<script>
			
			window.addEventListener('scroll', function() {
			  var dingbu=document.querySelector(".dingbu");
			  var element = document.querySelector('.youce');
			  
			  
			  var scrollingOffset = element.offsetTop; // 获取滚动参考元素的偏移量
			  var fixedElementOffset = dingbu.offsetTop; // 获取要固定元素的偏移量
			  var scrollPosition = window.scrollY || window.pageYOffset; // 获取滚动位置
			  
			  
			  if (scrollPosition >= 178) { // 如果滚动位置超过滚动参考元素的位置
			    element.classList.add('fixed'); // 添加固定样式类
			    element.style.top = 41+ 'px'; // 调整固定元素的位置
			  } else {
			    element.classList.remove('fixed'); // 移除固定样式类
			   // element.style.top = ''; // 重置固定元素的位置
			  }
			  
			  
			  console.log(scrollPosition)
			});
			
		</script>
	</body>
</html>